<template>
  <div class="tab">
    <h2>快速找医生</h2>
    <van-tabs v-model:active="active">
      <van-tab
        class="tabs"
        :title="item.title"
        v-for="item in tabCon"
        :key="item.id"
        style="margin-bottom: 15px"
      >
        <van-button
          v-for="val in item.children"
          :key="val.id"
          type="default"
          style="width: 105px; background-color: #f7f7f7; margin: 5px 0"
          @click="$router.push('/doctor/goods?id=' + val.id)"
          >{{ val.title }}</van-button
        >
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { getTabs } from "../API";
import { useRouter } from "vue-router";
let router = useRouter();
// 控制tab栏切换
const active = ref(0);
let tabCon = ref([]);
// 请求tab接口
let getTabContent = async () => {
  let { data } = await getTabs();
  // console.log(data.data.list);
  tabCon.value = data.data.list;
};
getTabContent();
</script>
<style scoped>
.tab {
  width: 100%;
  box-sizing: border-box;
}
.tab h2 {
  width: 95%;
  padding: 20px 20px;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
</style>